<!-- <page-header [title]=""></page-header> -->
<div nz-row [nzGutter]="12" style="margin-top: 10px;">

    <div nz-col nzSpan="9">
        <nz-card>
            <div nz-row class="mb-md">
                <div nz-col [nzSpan]="6">
                    <span title style="font-size: large;"><i nz-icon nzType="appstore"></i> 组织结构树</span>
                </div>
                <div nz-col [nzSpan]="6"></div>
                <div nz-col [nzSpan]="12" class="mb-md" style="text-align: right">
                    <button nz-button (click)="createRootUnit()" nzType="primary">
                        <i nz-icon nzType="plus" theme="outline"></i>
                        <span>添加根组织</span>
                    </button>
                </div>
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="24">
                    <nz-tree [nzData]="nodes" [nzShowExpand]="true" (nzClick)="activeNode($event)"
                        (nzDblClick)="openFolder($event)" [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
                    <ng-template #nzTreeTemplate let-node>
                        <span class="custom-node" aria-grabbed="true" [class.active]="activedNode?.key===node.key">
                            <span *ngIf="!node.isLeaf" [class.shine-animate]="node.origin.isLoading"
                                (contextmenu)="contextMenu($event,menu)">
                                <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'"
                                    (click)="openFolder(node)"></i>
                                <span class="folder-name">
                                    {{node.title}}</span>
                            </span>
                            <span *ngIf="node.isLeaf" (contextmenu)="contextMenu($event,menu)">
                                <i nz-icon nzType="file"></i>
                                <span class="file-name">
                                    {{node.title}}</span>
                            </span>
                        </span>
                    </ng-template>
                    <nz-dropdown-menu #menu="nzDropdownMenu">
                        <ul nz-menu>
                            <li nz-menu-item (click)="selectDropdown('sdModifi')">修改</li>
                            <li nz-menu-item (click)="selectDropdown('sdAddSubOrgn')">添加子组织</li>
                            <li nz-menu-item (click)="selectDropdown('sdDelete')">删除</li>
                        </ul>
                    </nz-dropdown-menu>
                </div>
            </div>
        </nz-card>
    </div>
    <div nz-col nzSpan="15">
        <nz-card style="width: 100%;" nzTitle="{{cardTitle}}">
            <nz-card-tab>
                <nz-tabset>
                    <nz-tab nzTitle="组织成员">
                        <nz-card [nzExtra]="extraTpl1">
                            <ng-template #extraTpl1>
                                <button nz-button (click)="addUsers()" nzType="primary"
                                    style="margin-bottom: 10px;margin-top: -6px;">
                                    <i nz-icon nzType="plus" theme="outline"></i>
                                    <span>添加成员</span>
                                </button>
                            </ng-template>
                            <ng-template #totalContentMeConfig>共{{queryUser.total}}条</ng-template>
                            <nz-table #nzTableUsers [nzData]="unitUsersList" [nzFrontPagination]="false"
                                [nzTotal]="queryUser.total" [(nzPageIndex)]="queryUser.pageIndex"
                                [(nzPageSize)]="queryUser.pageSize" [nzShowTotal]="totalContentMeConfig"
                                [nzShowSizeChanger]="true" (nzPageIndexChange)="getUnitUsers(tempNode)"
                                (nzPageSizeChange)="getUnitUsers(tempNode)">
                                <thead nz-thead>
                                    <tr>
                                        <th nz-th>
                                            <span>用户名</span>
                                        </th>
                                        <th>
                                            <span>添加时间</span>
                                        </th>
                                        <th>
                                            <span>操作</span>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody nz-tbody>
                                    <tr nz-tbody-tr *ngFor="let item of unitUsersList">
                                        <td nz-td>{{item.name}}</td>
                                        <td nz-td>{{item.addedTime| _date: 'yyyy-MM-dd'}}</td>
                                        <td nz-td>
                                            <a style="color:#ff4d4f;" (click)="deleteUsers(item)">删除</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </nz-table>
                        </nz-card>
                    </nz-tab>
                    <nz-tab nzTitle="角色">
                        <nz-card [nzExtra]="extraTpl2">
                            <ng-template #extraTpl2>
                                <button nz-button (click)="addRoles()" nzType="primary"
                                    style="margin-bottom: 10px;margin-top: -6px;">
                                    <i nz-icon nzType="plus" theme="outline"></i>
                                    <span>新增角色</span>
                                </button>
                            </ng-template>
                            <ng-template #totalContentMe>共{{queryRole.total}}条</ng-template>
                            <nz-table #nzTableRoles [nzData]="unitRolesList" [nzFrontPagination]="false"
                                [nzTotal]="queryRole.total" [(nzPageIndex)]="queryRole.pageIndex"
                                [(nzPageSize)]="queryRole.pageSize" [nzShowTotal]="totalContentMe"
                                [nzShowSizeChanger]="true" (nzPageIndexChange)="getUnitRoles(tempNode)"
                                (nzPageSizeChange)="getUnitRoles(tempNode)">
                                <thead nz-thead>
                                    <tr>
                                        <th nz-th>
                                            <span>角色</span>
                                        </th>
                                        <th nz-th>
                                            <span>角色名</span>
                                        </th>
                                        <th nz-th>
                                            <span>添加时间</span>
                                        </th>
                                        <th>
                                            <span>操作</span>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody nz-tbody>
                                    <tr nz-tbody-tr *ngFor="let item of unitRolesList">
                                        <td nz-td>{{item.name}}</td>
                                        <td nz-td>{{item.displayName}}</td>
                                        <td nz-td>{{item.addedTime| _date: 'yyyy-MM-dd'}}</td>
                                        <td nz-td>
                                            <a style="color:#ff4d4f;" (click)="deleteRoles(item)">删除</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </nz-table>
                        </nz-card>
                    </nz-tab>
                </nz-tabset>
            </nz-card-tab>
        </nz-card>
    </div>
</div>
<!-- <area-detail-modal #selectModal></area-detail-modal>
<doc-role-modal #docModal></doc-role-modal> -->